<style type="text/css">
    #hr-course-update {
        padding: 20px 25px 25px 0;
    }
    .cc{
        color: blue;
        font-size: 16px;
    }
</style>

<!-- 注意id属性每个页面id必须独立-->
<div class="layui-fluid" id="hr-course-update">
    <!-- 注意lay-filter属性，该属性为form表单唯一属性-->
    <form class="layui-form" action="" lay-filter="hr-course-update-form">
        <div class="layui-form-item febs-hide">
            <label class="layui-form-label febs-form-item-require">课程ID：</label>
            <div class="layui-input-block">
                <input type="text" name="id" minlength="2" maxlength="20"
                       autocomplete="off" class="layui-input"
                       data-th-value="${course.id}" disabled style="background:#CCCCCC">
            </div>
        </div>
        <!-- layui-form-item为自适应长度样式 -->
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">课程名称</label>
            <!-- layui-input-block为整行宽度样式 -->
            <div class="layui-input-block">
                <!-- minlength为最小长度、 maxlength为最大长度-->
                <!-- autocomplete默认填写off,此项为配置使用缓存读取历史记录-->
                <!-- lay-verify为表单验证属性：required：必填项、range于minlength，maxlength公用， character不能输入特殊字符-->
                <!-- 详细表单验证请参考：resources\static\febs\lay\modules\validate.js-->
                <input type="text" name="courseName" minlength="2" maxlength="20" data-th-value="${course.courseName}"
                        autocomplete="off" class="layui-input" lay-verify="range|txt|character">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">课程关键词</label>
            <div class="layui-input-block">
                <input type="text" name="courseKeywords" minlength="2" maxlength="50" placeholder="请输入课程关键词，用逗号分隔（用户如果中英文逗号混用，插入时自动替换）" 
                       autocomplete="off" class="layui-input" lay-verify="range">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">课程简介</label>
            <div class="layui-input-block">
                <!--<input type="text" name="courseInfo" minlength="2" maxlength="50" 
                       autocomplete="off" class="layui-input" lay-verify="range|txt|character">-->
                <!-- 简介、备注框使用textarea 样式使用layui-textarea-->
                <textarea name="courseInfo" maxlength="200" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <file class="layui-upload-file" src="" id="notice-add-file1" width="200px" height="150px"></file>
                    <input type="hidden" id="notice-add-attachmentUrl" name="attachmentUrl">
                    <p id="fileText"></p>
                    
                    <a id="showFile"><i class="layui-icon layui-icon-filedone" title="查看附件">查看附件</i></a>

                    <span id="notice-add-testfile" class="cc"hidden="true">重新上传附件</span>
                    
                    <span  id="notice-add-img" hidden="false">
                            <a ><i class="layui-icon febs-edit-area febs-red" title="删除">&#xe788;</i></a>
                   </span>
                    <span style="color: #e00000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多个文件，请先压缩至一个文件再上传，支持rar、zip、7z格式</span>
                    
                </div>
            </div>  
        </div>
       
        
        <div class="layui-form-item febs-hide">
            <button class="layui-btn" lay-submit="" lay-filter="course-update-form-submit"
                    id="hr-course-update-submit-btn"></button>
        </div>
    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['febs', 'form', 'validate','upload'], function () {
        let $ = layui.$,
            febs = layui.febs,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload,
            // 获得后台出入的实体对象
            course = [[${course}]],
            // 验证
            validate = layui.validate;
        // 表单验证
        form.verify(validate);
        // 表单渲染
        form.render();
        // 初始化页面数据
        initcourseValue();
        // 初始化页面数据
        function initcourseValue() {
            form.val("hr-course-update-form", {
                "id": course.id,
                "courseName": course.courseName,
                "courseKeywords": course.courseKeywords,
                "courseInfo": course.courseInfo,
                "attachmentUrl": course.attachmentUrl,
                
            });
        }

        // 表单提交事件
        form.on('submit(course-update-form-submit)', function (data) {
             console.log("进入修改" + data.field)
            // 如果都没有修改直接返回
            if (febs.nativeEqual(data.field, course)) {
                febs.alert.warn('数据未作任何修改！');
                return false;
            // 如果只修改了名字之外的东西，则直接更新
            }else if(febs.nativeEqual(data.field.courseName, course.courseName)){
                febs.post(ctx + 'course/update', data.field, function () {
                    layer.closeAll();
                    febs.alert.success('课程修改成功');
                    // 点击父页面查询按钮
                    $('#hr-course').find('#hr-course-query-btn').click();
                });
            // 如果名字发生变化先进行判断是否重名，如果重名则返回，不重名则修改
            }else {
                let courseName = data.field.courseName;
                if(febs.nativeEqual(data.field.courseName, course.courseName)){
                    courseName = null;
                }
                $.ajax({
                    type: 'get',
                    url: 'course/isRepetitive',
                    data: {"courseName": courseName},
                    success:function(res){
                        if(res){
                            febs.post(ctx + 'course/update', data.field, function () {
                                layer.closeAll();
                                febs.alert.success('课程修改成功');
                                $('#hr-course').find('#hr-course-query-btn').click();
                            });
                        }else{
                            febs.alert.error('输入的课程名称重复');
                        }
                    }
                });
            }
            return false;
        });

        //附件上传
        const uploadFile = upload.render({
            elem: '#notice-add-testfile'
            , url: ctx + 'upload' //改成您自己的上传接口
            , method: 'post'
            , auto: false
            , accept: 'file'
            , exts: '7z|rar|zip'
            , choose: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#notice-add-file1').attr('src', result);
                    obj.upload(index, file);
                });
            }
            , done: function (res) {
                //上传成功
                if (res.code === 200) {
                    $("#notice-add-attachmentUrl").val(res.url);
                    $('#showFile').attr("hidden",false);
                    layer.msg('上传附件成功');
                    $("#notice-add-img").attr("hidden",false);
                    $("#notice-add-testfile").attr("hidden",true);  //上传文件
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                const demoText = $('#fileText');
                demoText.html('<span style="color: #FF5722;">上传附件失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadFile.upload();
                });
            }
        });

        // 查看文件
        $('#showFile').on('click', function () {
            console.log("ddddddddddddddd");
            console.log("file", $("#notice-add-attachmentUrl").val());
            if ($("#notice-add-attachmentUrl").val() != null && $("#notice-add-attachmentUrl").val() != "" && ($("#notice-add-attachmentUrl").val().indexOf('.txt') != -1 || $("#notice-add-attachmentUrl").val().indexOf('.pdf') != -1)){
                layer.open({
                    type: 2
                    ,title: '查看文件' //不显示标题栏
                    ,closeBtn: 1
                    ,area: ['60%', '78%']
                    ,shade: 0.8
                    ,btn: ['确定']
                    ,btnAlign: 'r'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: $("#notice-add-attachmentUrl").val()
                    ,maxmin:true

                });
            }else if($("#notice-add-attachmentUrl").val() != null && $("#notice-add-attachmentUrl").val() != "" && ($("#notice-add-attachmentUrl").val().indexOf('.txt') == -1 && $("#notice-add-attachmentUrl").val().indexOf('.pdf') == -1))
            {
                window.open($("#notice-add-attachmentUrl").val());
                $("#notice-add-img").attr("hidden",false);
                
            }
            else {
                layer.msg('暂未发现文件！')
                console.log("ddddddddddddddd");
            }
        });

        $('#notice-add-img').on('click', function () {
            $("#notice-add-img").attr("hidden",true);
            $('#showFile').attr("hidden",true);
            //  $("#showFile").html("");
            // $("#notice-add-testfile").html(" <a id=\"notice-add-testfile\" >上传附件</a>");
            $("#notice-add-testfile").attr("hidden",false);
        });
        $('#notice-add-img').on('click', function () {
            $("#notice-add-img").attr("hidden",true);
            $('#showFile').attr("hidden",true);
            //  $("#showFile").html("");
            // $("#notice-add-testfile").html(" <a id=\"notice-add-testfile\" >上传附件</a>");
            $("#notice-add-testfile").attr("hidden",false);
        });
    });
</script>